<template>
    <div class="ma-content-block p-10">
        <a-form ref="formRef" :model="form" @submit="handleSubmit">
            <a-form-item field="product_id" label="藏品：" label-col-flex="auto" :label-col-style="{ width: '85px' }">
                <a-select v-model="form.product_id" placeholder="请选择藏品" allow-clear>
                    <a-option v-for="item in select_list" :value="item.id">{{ item.name }}</a-option>
                </a-select>
            </a-form-item>
            <a-form-item field="content" label="用户：" label-col-flex="auto" :label-col-style="{ width: '85px' }">
                <a-upload :custom-request="customRequest" />
            </a-form-item>
            <a-form-item field="content" label="用户：" label-col-flex="auto" :label-col-style="{ width: '85px' }">
                <a-textarea placeholder="多个使用，隔开" v-model="form.content" />
            </a-form-item>
            <a-form-item label-col-flex="auto" :label-col-style="{ width: '85px' }">
                <a-button type="primary" html-type="submit">提交</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>
<script setup>
import { ref, reactive, shallowRef } from "vue";
import request from '@/api/product'
import { Message } from "@arco-design/web-vue";

const form = reactive({
    product_id: "",
    content: ""
});
const select_list = ref([]);
const get_select = async () => {
    let { data: { product: list } } = await request.get_select();
    select_list.value = list;
};
get_select();

const customRequest = async (options) => {
    const file = options.fileItem.file;
    const dataForm = new FormData();
    dataForm.append("file", file);
    let { data } = await request.upload(dataForm);
    form.content = data?.str;
};

const formRef = shallowRef(null);
const handleSubmit = async () => {
    await request.submit_airdrop(form);
    Message.success("保存成功");
    // formRef.value.resetFields();
};
</script>